{% extends "Base.html" %}
{% load static %}
{% block pagetitle %} 排行榜{% endblock %}
{% block paget4 %}active{% endblock %}
{% block page4 %}<span class="sr-only">(current)</span>{% endblock %}


{% block content %}
    <div class="container-fluid">
        <div class="row justify-content-md-center ">
            <div class="top-title">排行榜</div>
        </div>
        <div class="row justify-content-md-center ">
            <div class="top-smtitle">·Top·</div>
        </div>
        <!--选择按钮-->
        <div class = "row top-btn1 justify-content-md-center" style="font-size: 1rem;">
            <div class="btn-group btn-group-toggle justify-content-center" data-toggle="buttons" style="">
                <label class="ubtn btn btn-secondary active">
                    <input id="mvbtn1" type="radio" onclick="tagchange(this)" name="options" autocomplete="off" checked> 国产电影
                </label>
                <label class="ubtn btn btn-secondary">
                    <input id="mvbtn2" type="radio" onclick="tagchange(this)" name="options" autocomplete="off"> 欧美电影
                </label>
                <label class="ubtn btn btn-secondary">
                    <input id="mvbtn3" type="radio" onclick="tagchange(this)" name="options" autocomplete="off"> 其他地区
                </label>
                <label class="ubtn btn btn-secondary">
                    <input id="mvbtn4" type="radio" onclick="tagchange(this)" name="options" autocomplete="off"> 全球总榜
                </label>
            </div>
        </div>

        <!--引用top.js-->
        <script type="text/javascript" src="{% static "js/top.js" %}"></script>
<style>
    .cardlink{

    }
    .card:hover{
        border-color: #ee3f4d;
        box-shadow:0 0 8px rgba(209, 26,45,0.8)
    }
</style>
{#        国产电影#}
        <div id="Cnmv" class="chinamv" style="width: 80%;margin-left: auto;margin-right: auto;margin-top: 5%;margin-bottom: 10%;">
            <!--测试用-->
{#            <div class="card" onclick="topclick(this)" style="width: 100%;margin-top: 1%;">#}
{#                <div class="row">#}
{#                    <div class="col-1"><span class="topline">1.</span></div>#}
{#                    <img class="card-img-top" src="../static/imag/jin.jpg" alt="Card image cap" style="width: 5%;height: 5%;">#}
{#                    <div class="col-9 m-auto">#}
{#                        <div class="topname" name = "movname" style="text-align: left;margin: 1%">金刚川</div>#}
{#                        <div style="text-align: left;margin-left: 1%"><span>主演:张译，吴京，李九霄</span></div>#}
{#                        <div name ="movtime" style="text-align: left;margin-left: 1%"><span style="opacity: 0.8">上映时间:2020-10-23</span></div>#}
{#                    </div>#}
{#                    <div class="col-1 m-auto" style="font-weight: bold;font-size: 2rem;font-style: italic;">9.4</div>#}
{#                </div>#}
{#            </div>#}



        </div>
{#        欧美地区#}
        <div id="Memv" class="Amermv" style="width: 80%;margin-left: auto;margin-right: auto;margin-top: 5%;margin-bottom: 10%;">

        </div>
{#        其他地区#}
        <div id="Oemv" class="oareamv" style="width: 80%;margin-left: auto;margin-right: auto;margin-top: 5%;margin-bottom: 10%;">

        </div>
{#        全球总榜#}
        <div id="Wwmv" class="worldmv" style="width: 80%;margin-left: auto;margin-right: auto;margin-top: 5%;margin-bottom: 10%;">

        </div>

    </div>
{% endblock %}